/**
 * Created by aa on 2018/4/9.
 */
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View,
    Button,
    Image,
    TouchableOpacity,
} from 'react-native';


export default class OrderCell extends React.Component {


    // 声明属性
    static defaultProps() {
        return{
            title:'',
            price:'',
            startAddress:'',
            endAdderss:'',
            time:'',
            number:'',
        }
    }

    // 状态机
    constructor(props){
        super(props);


    }


    render() {
        return (
            <View style={styles.container}>

            <View style={{width:375,height:10,backgroundColor:"#f5f5f5"}}></View>

            <View style={styles.topViewStyle}>
                <Image source={{uri:'w_label'}} style={{width:40,height:25}}>

                </Image>
                <Text style={{color:'orange',fontSize:15}}>{this.props.title}</Text>
                <Text style={{position: 'absolute',right: 10 ,fontSize:30}}>{this.props.price}</Text>
                <Text style={styles.lineViewStyle}></Text>
            </View>


                <View style={styles.contentViewStyle}>
                    <View style={{width:80,height:80, alignItems: 'center',justifyContent:'space-between',paddingTop:20,paddingBottom:20}}>
                        <Text>今天</Text>
                        <Text>{this.props.time}</Text>
                    </View>

                    <Text style={styles.verticalLineStyle}></Text>

                    <View style={{width:295,height:80}}>
                        <Text style={{marginLeft:5,marginTop:20}}>{this.props.startAddress}</Text>
                        <Text style={{marginLeft:5,marginTop:10}}>{this.props.endAdderss}</Text>
                    </View>

                    <Text style={styles.lineViewStyle}></Text>
                </View>

                <TouchableOpacity  onPress={this._onPress.bind(this)}>
                <View style={styles.bottomViewStyle}>
                    <Text style={{marginLeft:10}}>订单编号: {this.props.number}</Text>
                    <View style={styles.CodeTextViewStyle}>
                        <Text style={styles.CodeTextStyle}>立即抢单</Text>
                    </View>
                </View>
                </TouchableOpacity>

            </View>
        );
    }

    _onPress(){


    }
}


const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor:'white',

    },

    topViewStyle:{
        width:375,
        height:44,
        flexDirection: 'row',
        alignItems: 'center',
        // backgroundColor:'red',

    },

    contentViewStyle:{
        width:375,
        height:80,
        flexDirection: 'row',
        // alignItems: 'center',
        // backgroundColor:'red',
    },


    bottomViewStyle:{
        width:375,
        height:44,
        flexDirection: 'row',
        alignItems: 'center',
        // backgroundColor:'red',
    },

    lineViewStyle:{
        // width: 335,
        height:1 ,

        position: 'absolute',
        bottom: 0,
        left: 10,
        right: 10,
        backgroundColor: '#cccccc',

    },


    verticalLineStyle:{
        width:1 ,
        position: 'absolute',
        top:10,
        bottom: 10,
        left:80,
        backgroundColor: '#cccccc',

    },


    CodeTextViewStyle:{
        width:75,
        height:30,
        borderRadius:3,
        backgroundColor:'orange',
        alignSelf: 'center',
        justifyContent:'center',

        position: 'absolute',
        right: 10,
    },

    CodeTextStyle:{
        color:'white',
        textAlign: 'center',

    },

})


module.exports = OrderCell;




